<template>
	<view class="main-cont">
		<view class="" style="height: 379rpx;background-color: #7484f7;"> </view>
		<view class="main-top">
			<view class="top-1">
				<view class="info-cont box box-align-center box-pack-between mt5" @click="goPerson(user)">
					<view class="info">
						<u-avatar :src="user.icon" mode="circle" size="104"></u-avatar>
						<view class="info-bottom">
							<view class="name">
								<view class="user-name">
									{{user.name}}
								</view>
								<view class="tips ml5" v-if="role=='tr'">老师</view>
								<view class="tips ml5" v-if="role=='stu'">学生</view>
								<view class="tips ml5" v-if="role=='team'">服务团队</view>
							</view>
							<view class="school-name">
								{{(user.mobile==undefined || user.mobile==null)?'':user.mobile}}
							</view>
						</view>
					</view>
					<u-icon name="arrow-right" color="#AEB8CF"></u-icon>
				</view>
			</view>
		</view>
		<!-- <view class="foucs box box-pack-center">
			<u-image src="/static/class/icon_foucs.png" width="739rpx" height="139rpx"></u-image>
			<view class="box box-align-center foucs-main box-pack-center">
				<view class="mr5 foucs-cont">
					关注五育通，查看更多学习内容
				</view>
				<view class="on-foucs" @click="foucs()">
					立即关注
				</view>
			</view>
		</view> -->
		<view class="main-bottom">
			<view class="list" @click="changerole" v-if="roles.length>1">
				<view class="list-left">
					<u-image src="/static/my/change_user.png" width="40rpx" height="37rpx"></u-image>
					<view class="icon-1">
						切换身份
					</view>
				</view>
				<u-icon name="arrow-right" color="#AEB8CF"></u-icon>
			</view>
			<view class="list" @click="goClass()">
				<view class="list-left">
					<u-image src="/static/my/class.png" width="36rpx" height="37rpx"></u-image>
					<view class="icon-1">
						我的班级
					</view>
				</view>
				<u-icon name="arrow-right" color="#AEB8CF"></u-icon>
			</view>
			<view class="list" @click="goXqRecord">
				<view class="list-left">
					<u-image src="/static/my/record.png" width="36rpx" height="37rpx"></u-image>
					<view class="icon-1">
						学情报告
					</view>
				</view>
				<u-icon name="arrow-right" color="#AEB8CF"></u-icon>
			</view>

			<view class="list" @click="scan()">
				<view class="list-left">
					<u-image src="/static/my/pc.png" width="42rpx" height="37rpx"></u-image>
					<view class="icon-1">
						PC电脑端
					</view>
				</view>
				<view class="box box-align-center">
					<u-link href="https://www.wytldy.com" text="https://www.wytldy.com" mpTips="链接已复制,请在浏览器输入网址登录">
						www.wytldy.com" 点击链接复制</u-link>
					<!-- <u-image src="/static/my/copy.png" width="46rpx" height="48rpx"></u-image> -->
				</view>
			</view>
			<u-button class="list btn-open" open-type="contact" :custom-style="contact">
				<view class="list-left">
					<u-image src="/static/my/contact.png" class="btn" width="36rpx" height="37rpx"
						style="margin-top: -30rpx;"></u-image>
					<view class="icon-1">
						联系客服
					</view>
				</view>
				<u-icon name="arrow-right" color="#AEB8CF"></u-icon>
			</u-button>
			<view class="list" @click="open">
				<view class="list-left">
					<u-image src="/static/my/set.png" width="36rpx" height="37rpx"></u-image>
					<view class="icon-1">
						设置
					</view>
				</view>
				<u-icon name="arrow-right" color="#AEB8CF"></u-icon>
			</view>
			<!-- <view class="list" @click="goBind()">
				<view class="list-left">
					<u-icon name="weixin-fill" color="#44f724" size="36"></u-icon>
					<view class="icon-1">
						绑定微信
					</view>
				</view>
				<u-icon name="arrow-right" color="#AEB8CF"></u-icon>
			</view>
			<view class="list" @click="update()">
				<view class="list-left">
					<u-icon name="reload" color="#7484f7" size="36"></u-icon>
					<view class="icon-1">
						检查更新
					</view>
				</view>
			</view> -->
		</view>
		<u-top-tips ref="uTips" :z-index="10000"></u-top-tips>
		<u-modal v-model="show" :content="content" style="white-space:pre-wrap;" :show-title="false"
			:show-cancel-button="true" confirm-color="#000" confirm-text="扫码" @confirm="confirm"></u-modal>
		<!-- 设置 -->
		<u-popup v-model="setShow" @close="close" mode="center" :closeable="true">
			<view class="set-item">
				<view class="list box box-align-center box-pack-center" @click="changePassword">
					<u-image src="/static/my/change_password.png" width="33rpx" height="37rpx"></u-image>
					<view class="ml10">
						修改密码
					</view>
				</view>
				<view class="list box box-align-center box-pack-center mt20" @click="loginOut">
					<u-image src="/static/my/login_out.png" width="34rpx" height="32rpx"></u-image>
					<view class="ml10">
						退出登录
					</view>
				</view>
				<view class="list box box-align-center box-pack-center mt20" @click="destroyShow = true">
					<u-image src="/static/my/zx_icon.jpg" width="34rpx" height="32rpx"></u-image>
					<view class="ml10">
						注销账号
					</view>
				</view>
			</view>
		</u-popup>
		<u-modal v-model="destroyShow" content="注销后所有数据不保留,是否确认?" :show-cancel-button="true" @confirm="confirm"
			@cancel="cancel"></u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				destroyShow:false,
				customStyle: {
					color: '#4c87ff'
				},
				isdot: false,
				userRole: '',
				user: uni.getStorageSync('user'),
				contact: {
					width: '722rpx',
					display: 'flex',
					alignItems: 'center',
					justifyContent: 'space-between',
					padding: '0'
				},
				roles: uni.getStorageSync("roles"),
				role: uni.getStorageSync("role"),
				setShow: false
			}
		},
		onShow() {

		},
		onLoad() {},
		//下拉刷新
		onPullDownRefresh() {},
		methods: {
			setdata() {
				this.user = uni.getStorageSync('user')
				uni.stopPullDownRefresh();
			},
			init() {
				//是否有未读消息
				let opts = {
					url: '/msg/firstNotRead',
					method: 'post'
				};
				let param = {
					userid: this.user.id
				};
				this.$api.httpRequest(opts, param).then(res => {
					uni.stopPullDownRefresh();
					if (res.data.code == 0) {
						// //console.log(res)
						if (res.data.message != undefined) {
							this.isdot = true;
							// //console.log(this.isdot)
						}
					}
				})
			},
			goXqRecord() {
				uni.navigateTo({
					url: '/trPageMy/xqRecord'
				})
			},
			goMessage() {
				uni.navigateTo({
					url: '/trPageMy/message'
				})
			},
			goClass() {
				uni.navigateTo({
					url: '/trPageMy/classList'
				})
			},
			foucs() {
				uni.navigateTo({
					url: '/trPageMy/sjInfo'
				})
			},
			goPerson(user) {
				uni.setStorage({
					key: "User",
					data: user
				})
				uni.navigateTo({
					url: '/trPageMy/personInfo?user=' + user
				})
			},
			goHelp() {
				uni.navigateTo({
					url: '/pageMy/my/help?url=' + this.helpUrl
				})
			},
			confirm() {
				let opts = {
					url: '/sysuser/cancel',
					method: 'post'
				};
				let param = {
					userid: this.user.id
				};
				this.$api.post(opts, param).then(res => {
					//console.log(res)
					if (res.code == 0) {
						uni.showToast({
							title: '注销成功',
							icon: "success",
							duration: 1500,
							success: () => {
								this.loginOut()
							}
						})
					}
				})
			},
			cancel() {
				this.destroyShow = false
			},
			loginOut() {
				uni.removeStorage({
					key: 'user'
				});
				uni.removeStorage({
					key: 'accont'
				});
				uni.removeStorage({
					key: 'roles'
				});
				uni.removeStorage({
					key: 'role'
				});
				uni.removeStorage({
					key: 'currSchool'
				});
				uni.removeStorage({
					key: 'dclass'
				});
				uni.removeStorage({
					key: 'clazz'
				});

				uni.reLaunch({
					url: '/pages/index/index'
				})
			},
			changePassword() {
				uni.navigateTo({
					url: '/pageHome/changePassword/changePassword'
				})
				this.setShow = false
			},
			changerole() {
				uni.reLaunch({
					url: '/pages/index/selectRole'
				})
				uni.removeStorage({
					key: 'clazz',
					success: function(res) {

					}
				});
			},
			close() {
				this.setShow = false
			},
			open() {
				uni.navigateTo({
					url: '/trPageMy/set'
				})
				// this.setShow = true
			},
			goBind() {
				uni.navigateTo({
					url: '/trPageMy/bind'
				})
			},
			update() {
				if (wx.canIUse('getUpdateManager')) {
					const updateManager = wx.getUpdateManager()
					updateManager.onCheckForUpdate(function(res) {
						// 请求完新版本信息的回调
						if (res.hasUpdate) {
							updateManager.onUpdateReady(function() {
								wx.showModal({
									title: '更新提示',
									content: '新版本已经准备好，是否重启应用？',
									success: function(res) {
										if (res.confirm) {
											// 新的版本已经下载好，调用 applyUpdate 应用新版本并重启
											updateManager.applyUpdate()
										}
									}
								})
							})
							updateManager.onUpdateFailed(function() {
								// 新的版本下载失败
								wx.showModal({
									title: '已经有新版本了哟~',
									content: '新版本已经上线啦~，请您删除当前小程序，重新搜索打开哟~',
								})
							})
						} else {
							uni.showToast({
								title: '已经是最新版本',
								icon: 'none'
							})
						}
					})
				} else {
					// 如果希望用户在最新版本的客户端上体验您的小程序，可以这样子提示
					// wx.showModal({
					// 	title: '提示',
					// 	content: '当前微信版本过低，无法使用该功能，请升级到最新微信版本后重试。',
					// 	success: () => {
					// 		 wx.exitMiniProgram({})
					// 	}
					// })
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.user-name {
		max-width: 300rpx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.main-cont {
		position: relative;
		margin-top: -188rpx;
		width: 100%;

		.main-top {
			margin-top: -240rpx;
			position: relative;
			width: 100%;
			height: 200rpx;

			.wrap {

				margin-top: 173rpx;
				width: 90%;
				position: absolute;
				left: 50%;
				top: 0;
				padding: 0;
				transform: translate(-50%, 0);
			}

			.top-1 {
				padding: 40rpx 57rpx 0;
				display: flex;
				align-items: center;
				justify-content: space-between;
				color: #fff;

				.info-cont {
					width: 100%;
				}

				.info {
					display: flex;
					align-items: center;
					justify-content: center;

					.info-bottom {
						padding-left: 21rpx;
						display: flex;
						flex-direction: column;
						align-items: flex-start;
						justify-content: flex-start;

						.name {
							display: flex;
							align-items: center;
							font-size: 40rpx;
						}

						.tips {

							// min-width: 103rpx;
							padding: 0 20rpx;
							// width: 77rpx;
							height: 36rpx;
							line-height: 32rpx;
							background: #8F92FC;
							border: 1px solid #F3F4FB;
							border-radius: 18px;
							color: #fff;
							font-size: 22rpx;
							text-align: center;

						}

						.score {
							margin-top: 16rpx;
							display: flex;
							align-items: center;
							justify-content: center;

							.score-1 {
								margin: 0 10rpx;
							}
						}

						.school-name {
							margin-top: 8rpx;
							font-size: 28rpx;
							// display: flex;
							// align-items: center;
							// justify-content: center;
							// padding: 10rpx;
							// border-radius: 30rpx;
							// background-color: #7caefb;
						}
					}
				}

				.btn1 {}
			}

			.top-2 {
				display: flex;
				align-items: center;
				justify-content: center;
				color: #fff;
				// height: 216rpx;
				height: 150rpx;

				.left,
				.right {
					position: relative;
					width: 40%;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;

					.mt20 {
						margin-top: 20rpx;
					}

					.img {
						position: absolute;
						right: -107rpx;
						top: -72rpx;
					}

				}

			}
		}

		.foucs {
			margin-top: -36rpx;
			position: relative;
			width: 100%;
			height: 139rpx;

			.foucs-main {
				width: 100%;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
			}

			.foucs-cont {
				font-size: 28rpx;
				color: #FFF7E7;
			}

			.on-foucs {
				width: 142rpx;
				height: 53rpx;
				line-height: 53rpx;
				background: linear-gradient(180deg, #FFFFFF, #FBD2C3);
				box-shadow: 0px 1rpx 35rpx 0px rgba(255, 144, 113, 0.49);
				border-radius: 21px;
				color: #F95C2E;
				font-size: 24rpx;
				text-align: center;
			}
		}

		.main-bottom {
			.list {
				// width: 722rpx;
				margin: 16rpx 14rpx;
				padding: 0 36rpx;
				height: 100rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				background-color: #fff;
				border-radius: 8rpx;

				.list-left {
					display: flex;
					align-items: center;

					.icon-1 {
						margin-left: 20rpx;
					}
				}
			}
		}
	}

	.btn-open {
		font-size: 29rpx;
		// width: 100%;
		background: transparent;
		border: none !important;
		padding: 0;

		.u-hairline-border::after {
			border: none !important;
		}
	}

	.days {
		font-size: 24rpx;
		margin-top: 50rpx;
	}

	.mt10 {
		margin-top: 16rpx !important;
	}

	.set-item {
		padding: 120rpx 40rpx;

		.list {
			width: 528rpx;
			height: 72rpx;
			background: #F8F9FC;
			border-radius: 12rpx;
		}
	}
</style>
